<template>
  <div>
    <a-space direction="vertical">
      <template #split>
        <a-divider direction="horizontal" style="width: 100%" />
      </template>
      <div class="titel_box">
        <span class="title">文件类型</span>
      </div>
      <div class="content_box">
        <a-menu :style="{ width: '200px', height: '100%' }" :default-open-keys="['0']" :default-selected-keys="['0_2']">
          <a-sub-menu key="0">
            <a-menu-item v-for="(fts, index) in filesTypeList" :key="index">
              <div class="content_box_item">
                <img
                  :src="`https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/files_icon/${fts.icon}.png`"
                  alt=""
                />
                <span class="content_span">{{ fts.filesTypeName }}</span>
              </div>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
        <!-- <a-menu :default-open-keys="['0']" :default-selected-keys="['0_2']" :style="{ width: '200px', height: '100%' }">
          <a-sub-menu key="0">
            <a-menu-item v-for="(fts, index) in filesTypeList" :key="index">
              <div class="content_box_item">
                <img
                  :src="`https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/files_icon/${fts.icon}.png`"
                  alt=""
                />
                <span class="content_span">{{ fts.filesTypeName }}</span>
              </div>
            </a-menu-item>
          </a-sub-menu>
        </a-menu> -->
      </div>
    </a-space>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'FilesType'
})
</script>
<script lang="ts" setup>
// 文件类型列表
const filesTypeList = ref([
  {
    filesTypeName: '全部',
    icon: '全部'
  },
  {
    filesTypeName: '电子说明书',
    icon: '电子说明书'
  },
  {
    filesTypeName: '操作视频',
    icon: '操作视频'
  },
  {
    filesTypeName: '产品类型图片',
    icon: '产品类型图片'
  }
])
</script>

<style  scoped>
.content_box img {
  width: 30px;
  margin-right: 10px;
}

::v-deep .arco-menu-item {
  padding: 10px 0px;
  height: 50px;
  /* line-height: 50px; */
}
::v-deep .arco-menu-item-inner {
  height: 50px;
  /* display: flex; */
}

.content_span {
  display: inline-block;
  line-height: 30px;
}

.content_box_item {
  padding-left: 10px;
  display: flex;
}

::v-deep .arco-menu-indent-list {
  display: none;
}

::v-deep .arco-menu-inner {
  padding-left: 0px;
}

::v-deep .arco-menu-item.arco-menu-selected {
  background: #f4f6fc;
  color: black;
  transition: 0.6s;
}
</style>